<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JSZip: JavaScript zip class</title>
<meta name="description" content="Create .zip files using Javascript. Provides a simple API to " />
<link rel="stylesheet" href="960.css" type="text/css" media="all" />
<style type="text/css">
body
{
   font-family: Helvetica, Deja Vu Sans, sans-serif;
   font-size: 90%;
}

a { color: #00639E; }

a:hover {text-decoration: none;}

ul, ol
{
   padding-left: 20px;
}

h1 {
   letter-spacing: -0.06em;
   font-size: 3em;
   margin-bottom: 0.2em;
}
h2 { font-weight: 100; }
h3 { margin-bottom: 0; }
p, ul { margin: 0.5em 0; }

h4
{
   border-bottom: 1px solid #CCCCCC;
}

#header
{
   text-align: center;
}

.border
{
   border-right: 1px solid #CCCCCC;
   margin-right: 0;
   padding-right: 9px;
}

table
{
   margin-right: 2em;
}

th, td
{
   padding: 2px 5px;
   text-align: center;
   border-right: 1px solid #CCC;
}

th {border-width: 0 0 2px 0;border-style: solid;}

.ie {border-color: #0275BA;}
.ff {border-color: #DF7215;}
.sf {border-color: #43B3E9;}
.cr {border-color: #39B642;}
.op {border-color: #C42122;}

hr
{
   clear: both;
   border: none;
   border-top: 1px solid #CCCCCC;
}

#where p
{
   text-align: center;
}

#where .download
{
   background: #28AA31;
   color: #FFFFFF;
   height: 2em;
   line-height: 2em;
   -webkit-border-radius: 0.25em;
   -moz-border-radius: 0.25em;
   border-radius: 0.25em;
}

pre.example
{
   background: #E8E8E8;
   margin-left: -10px;
   padding: 10px;

   overflow: hidden;
}

.bad { color: #B63939; }
#status { color: #28AA31; }
</style>
<script type="text/javascript" src="gbk.js"></script>
<script type="text/javascript" src="jszip.js"></script>
<script type="text/javascript">
imgData = "R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=";

window.onload = function()
{
   var d = document.getElementById("demo");
   d.onclick = runDemo;
   if (d.captureEvents) d.captureEvents(Event.CLICK);

   document.getElementById("demo-code").onkeypress = function()
   {
      document.getElementById("status").innerHTML = "";
   }

   function runDemo()
   {
      var err = false;
      try { eval(document.getElementById("demo-code").value); }
      catch (e) {
         err = true;
         document.getElementById("status").innerHTML = e;
      }
      if (!err) document.getElementById("status").innerHTML = "Done!";
   }
}

</script>
</head>
<body>

<div class="container_12">
   <div id="header" class="grid_12">
   <div class="alpha grid_5">
    <h1>JS<span style="font-weight:100">Zip</span></h1>
    Create .zip files with Javascript
   </div>
   </div>

   <div id="how" class="grid_5 border">
      <h2>How?(支持中文，修改 by yiminghe,文件内容用utf-8编码,文件名字用gbk编码)</h2>
      <textarea id="demo-code" rows="7" class="grid_5 alpha omega">
var zip = new JSZip();
zip.add("Hello 我.txt", "我 Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;
      </textarea>
      <button id="demo">Run!</button>
      <span id="status"></span>
   </div>

   <div id="why" class="grid_4 border">
      <h2>Why?</h2>
      <ol>
      <li>JavaScript today is capable of generating a lot of data. The easiest way to deliver multiple files to your users is in a zip file. Instead of wasting server resources and bandwidth you can get the client to do it for you.</li>
      <li>Because it's cool!</li>
      </ol>
   </div>

   <div id="where" class="grid_3">
      <h2>Where?</h2>
      <p>
      <a href="http://github.com/Stuk/jszip/zipball/master" class="download grid_3 alpha omega">Download</a>
      <small>from <a href="http://github.com/Stuk/jszip/tree">Github</a></small>
      </p>

      <p>
      See also: the <a href="test/">test suite</a>
      </p>
   </div>
   <hr/>
   <div class="grid_9 border">
      <h2>Tell me more!</h2>

      <h3>Browser support</h3>
      <table cellspacing="0">
         <tr><th class="op">Opera</th> <th class="ff">Firefox</th> <th class="sf">Safari</th> <th class="cr">Chrome</th> <th class="ie">Internet Explorer</th> </tr>
         <tr><td>7.5+</td> <td>3.0+</td> <td>Yes</td> <td>No</td> <td>No</td></tr>
         <tr>
          <td>Filename is "default.zip"</td>
          <td>Filename is random alphanumeric with ".part" extension</td>
          <td>Filename is "Unknown" (no extension)</td>
          <td>Appears to only support data URLs for some content</td>
          <td><a href="http://msdn.microsoft.com/en-us/library/cc848897(VS.85).aspx">Only supports data URLs for some content</a>. (May be able to use <a href="http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/">MHTML</a>?)</td>
         </tr>
      </table>

      <p>Tests still need to be run on historical browsers to check which versions are supported.</p>

      <h3>Documentation</h3>

      <h4>new JSZip()</h4>
      <p>The constructor</p>
      <pre class="example">
zip = new JSZip();</pre>

      <h4>add(name, data [,options])</h4>
      <p>Add a file to the zip file. Supports chaining.</p>
      <p>Options:</p>
      <ul>
         <li><code>base64</code>, boolean. Set to <code>true</code> if the data
         is base64 encoded. For example image data from a <code>&lt;canvas&gt;</code> element.
         Plain text does not need this option.</li>
      </ul>
      <pre class="example">
zip.add("Hello.txt", "Hello World\n");
zip.add("smile.gif", "R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=", {base64: true});
zip.add("animals.txt", "dog,platypus\n").add("people.txt", "james,sebastian\n");</pre>
      <p>
      Result: <code>Hello.txt, smile.gif, animals.txt, people.txt</code>
      </p>

      <h4>folder(name)</h4>
      <p>Add a directory to the zip file. Supports chaining.</p>
      <pre class="example">
zip.folder("images");
zip.folder("css").add("style.css", "body {background: #FF0000}");
// or specify an absolute path (using forward slashes)
zip.add("css/font.css", "body {font-family: sans-serif}")</pre>
      <p>
      Result: <code>images/, css/, css/style.css, css/font.css</code>
      </p>

      <h4>find(needle)</h4>
      <p>Compare a string or <a href="http://www.javascriptkit.com/javatutors/redev.shtml">regular expression</a>
      against all of the filenames and returns an informational object for each that matches.</p>
      <pre class="example">
zip.add("Readme", "Hello World!\n");
zip.add("Readme.French", "Bonjour tout le monde!\n");
zip.add("Readme.Pirate", "Ahoy m'hearty!\n");

zip.find("Readme"); // only finds "Readme"
zip.find(/^Readme/); // Regular expression finds all three</pre>
      <p>
      Result: Array of matched file objects in the form:
      <code>{name: "Readme", data: "Hello World!", dir: false}</code>
      </p>

      <h4>remove(name)</h4>
      <p>Delete a file. (<em>Todo: make recursive on folders</em>)</p>
      <pre class="example">
zip.add("Hello.txt", "Hello World\n");
zip.add("temp.txt", "nothing").remove("temp.txt");</pre>
      <p>
      Result: <code>Hello.txt</code>
      </p>
      <pre class="example">
zip.add("Hello.txt", "Hello World\n");
zip.folder("css").add("style.css", "body {background: #FF0000}");
zip.remove("Hello.txt").remove("css");</pre>
      <p>
      Result: Empty zip.
      </p>

      <h4>generate(asBytes = false)</h4>
      <p>Generates the complete zip file. By default encoded as base64, pass <code>true</code> to get the raw byte string</p>
      <pre class="example">
content = zip.generate();
location.href="data:application/zip;base64,"+content;</pre>

      <pre class="example">
content = zip.generate(true);
for (var c = 0; c &lt; content.length; c++)
{
    console.log(content.charCodeAt(c));
    // do other things
}</pre>
   </div>

   <div id="who" class="grid_3">
      <h2>Anything else?</h2>

      <h3>License</h3>
      <p>
      GPLv3 and/or MIT
      </p>

      <h3>Todo</h3>
      <ul>
       <li>Set correct version needed to extract</li>
       <li>Set correct version made by</li>
       <li>Set modification date/times (convert from <code>Date()</code> to hex)</li>
       <li>Set internal and external file attributes in central directory</li>
       <li>Allow setting of modification dates/attributes/other info in <code>add()</code> options object</li>
       <li>Look into using <a href="http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/">MHTML</a> for IE</li>
      </ul>

      <h3>Who?</h3>
      <p>
      <a href="http://stuartk.co.uk">Stuart Knightley</a>.
      </p>

      <h3>Thanks and comments</h3>
      <ul>
         <li><a href="mailto:stuart -at- stuartk.co.uk?subject=JSZip">Email me</a></li>
         <li>Buy something from my <a href="http://www.amazon.co.uk/gp/registry/29NPQFRWIMH81">Amazon wishlist</a></li>
         <li>or even <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=H26VJELQBHJJ6&amp;lc=GB&amp;item_name=JSZip&amp;currency_code=GBP&amp;bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted">donate</a></li>
      </ul>
   </div>

</div>

</body>
</html>
